<template>
  <div>
    <el-pagination :current-page="page"
                   :page-sizes="limits"
                   :page-size="limit"
                   :total="total"
                   layout="total, sizes, jumper,slot, prev,pager, next"
                   @size-change="pageSizeChangeHandle"
                   @current-change="pageCurrentChangeHandle"
                   class="zero-pagination">
      <el-link :underline="false"
               @click="firstPageHandle"
               :disabled="page === 1">首页</el-link>
    </el-pagination>
    <el-pagination :current-page="page"
                   :page-sizes="limits"
                   :page-size="limit"
                   :total="total"
                   layout="slot"
                   @size-change="pageSizeChangeHandle"
                   @current-change="pageCurrentChangeHandle"
                   class="zero-pagination">
      <el-link :underline="false"
               @click="lastPageHandle"
               :disabled="Math.ceil(total / limit) === 1 || Math.ceil(total / limit) === page">尾页</el-link>
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'ZeroPage',
  props: {
    page: Number, // 当前页
    limits: {
      type: Array,
      default: () => [10, 15, 20, 50, 100]
    }, // 一页显示多少条选择
    limit: Number, // 一页显示多少条
    total: Number, // 总条数
    refreshRef: String, // 刷新的表格ref值
    pageSizeChangeHandle: { // 分页, 每页条数
      type: Function,
      default: null
    },
    pageCurrentChangeHandle: { // 分页, 当前页
      type: Function,
      default: null
    },
    firstPageHandle: { // 分页,首页
      type: Function,
      default: null
    },
    lastPageHandle: { // 分页,首页
      type: Function,
      default: null
    }
  }
}
</script>

<style>
.zero-pagination {
  float: left;
  padding: 10px 5px !important;
}
.zero-pagination > .el-pagination__jump {
  margin-left: 0px;
  margin-right: 20px;
}
</style>
